<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex</title>
	<style type="text/css">
	*{
		padding:0;
		margin: 0;
	}
	.max{
		display:flex;
		flex-direction: row;
		width: 60%;
		margin: 0 auto;
	}
	.mid{
		display:flex;
		flex:1;
		height: 200px;
		background: #00CED1;
		justify-content: center;
		color: #fff;
		transition: all .5s linear;
	}
	.midd{
		border-left:1px solid #fff; 
		border-right:1px solid #fff; 
	}
	.mid:hover{
		flex:2;
	}
</style>
</head>
<body>
	<div class="max">
		<div class="mid">1</div>
		<div class="mid midd">2</div>
		<div class="mid">3</div>
	</div>	
</body>
</html>